<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="我的资质"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="rounded-lg mb-30 bg-gradient-to-b from-[#F2F8FF] to-[#D0EDFF] p-20"
						v-for="e,i in aptitudeList" :key="i">
						<view class="flex items-center justify-between">
							<view class="flex items-center">
								<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
								<text class="text-md font-bold mx-10">{{jobQuery(e)}}</text>
								<text class="text-[#666666]">|{{e.prijob==1?'主职业':'副职业'}}</text>
							</view>
							<view class="" v-if="i != 0 && !isView">
								<text>开启答题</text>
								<switch style="transform:scale(0.8)" color="#329EFF" class="ml-10" :checked="e.ans == 1" @change="switchChange(e)" />
							</view>
						</view>
						<!--  -->
						<view class="flex items-center mt-20" v-if="i == 0">
							<view class="flex-1 flex items-center">
								<view class="flex items-center">
									<text class="font-bold text-sm">LV.</text>
									<text class="text-[#329EFF] font-bold text-sm ml-10">{{anchor.achorlevel?.lev}}</text>
								</view>
								<view class="flex-1 mx-20 border-2 border-solid border-white rounded-full overflow-hidden bg-[#EEF1F6]">
									<view class="bg-gradient-to-r h-20 rounded-r-full"
										:style="{width:`${lessonCount(anchor.exp,anchor.achorlevel?.upcost)}%`,'--tw-gradient-stops':`#82CAFF,#329EFF`}">
									</view>
								</view>
								<text class="text-[#3E5D73] text-sm font-bold">{{anchor.exp}}/{{anchor.achorlevel?.upcost}}</text>
							</view>
							<view class="bg-gradient-to-b from-[#329EFF] to-[#6CBAFF] h-56 w-144 flex items-center justify-center rounded-full ml-20"
								v-if="!isView" @click="handleUpdate">
								<text class="text-sm text-white">提升等级</text>
							</view>
						</view>
						<!-- 职业描述 -->
						<view class="bg-[#EBF7FF] rounded-lg p-10 mt-20">
							<text class="text-[#697379]">{{e.content}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="inputDialogRef" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="提升等级" @confirm="dialogInputConfirm">
				<uni-easyinput type="number" v-model="exp" trim="all" placeholder="请输入要提升的经验值" @input="handleInput"></uni-easyinput>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi';
	import {
		jobQuery
	} from '@/config/publicFun';
	
	const isView = ref(false)
	const anchorId = ref('')
	const anchor = ref({})
	const aptitudeList = ref([])
	const exp = ref('');
	const needExp = ref(0);
	const inputDialogRef = ref(null)
	const jobDescList = [
		{
			jobtp: 1,
			content: '具有治愈能力并同时至少精通一种以上能对于客户提出的问题进行解读，包括但不限于平台提供的参考工具，拥有专属学科资质解读能力并能提供专属建议的解读师。'
		},{
			jobtp: 2,
			content: '以星图为主要参考工具，能够进行各种多种星图组合进行解读，清晰细致的归纳出各种相位相互之间的因果关系，并根据用户的要求提出可行性建议的解读师。'
		},{
			jobtp: 3,
			content: '主要以卡牌为工具的解读师，能够灵活针对事件进行分析解读，初级卡牌师能够针对各种牌型进行快捷解读，高级卡牌师能够根据问题推荐制定定向型的牌型解读，并给出建议。'
		},{
			jobtp: 4,
			content: '咨询师是具有国家级心理学资质并同时具有至少一种以上其他学科领域能力的专业解读师，能够针对心理方面的问题进行专业评估及解读，需要上传相关资质证书。'
		}
	]
	onLoad((option) => {
		anchorId.value = uni.getStorageSync('anchor').id
		anchor.value = uni.getStorageSync('anchor')
		if (option.view) {
			isView.value = option.view
		}
		if (option.id) {
			anchorId.value = option.id
			getAnchorDetail()
		}
		needExp.value = parseInt(anchor.value?.achorlevel.upcost - anchor.value.exp)
	})
	onShow(() => {
		getJobList()
	})
	const handleInput = (val) => {
		if (val > needExp.value) {
			uni.showToast({
				icon: 'none',
				title: `最大可输入${needExp.value}!`
			})
			return
		}
	}
	// 提升等级
	const handleUpdate = () => {
		inputDialogRef.value.open();
	}
	const dialogInputConfirm = () => {
		if (!exp.value) {
			uni.showToast({
				icon: "none",
				title: "请输入要提升的经验值"
			})
			return
		}
		let opt = {
			id: anchorId.value,
			// 'achorlevel.id': levelNext.value.id,
			exp: exp.value
		}
		userApi.anchorLevelUp(opt).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: "升级成功！"
				})
				getAnchorDetail()
			}else {
				uni.showToast({
					icon: "none",
					title: res.msg
				})
			}
		})
	}
	const lessonCount = (num, num1) => {
		return ((num / num1) * 100).toFixed(2)
	}
	const getAnchorDetail = () => {
		userApi.queryAnchorInfoByid({
			"id": anchorId.value
		}).then((res) => {
			anchor.value = res.data
			uni.setStorageSync('anchor', res.data)
			needExp.value = parseInt(res.data.achorlevel.upcost - res.data.exp)
		})
	}
	const getJobList = () => {
		const opt = {
			"anchor.id": anchorId.value
		}
		userApi.anchorGetJoblist(opt).then(res => {
			res.data.map(item => {
				item.job = item.jobtp
				// const arr = jobDescList.filter(job => item.jobtp == job.jobtp)
				// console.log(arr[0])
				jobDescList.map(job => {
					if (item.jobtp == job.jobtp) {
						item.content = job.content
					}
				})
			})
			aptitudeList.value = res.data
		})
	}
	const switchChange = (item) => {
		const opt = {
			id: item.id,
			ans: item.ans==1?0:1
		}
		userApi.anchorEditJobAnswer(opt).then(res => {
			if (res.code == 200) {
				getJobList()
			}
		})
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>

</style>